<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>事件</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }

        .red {
            background-color: red;
        }

        .drop-zone {
            width: 300px;
            padding: 20px;
            border: 2px dashed #000;
        }
    </style>
</head>
<body onload="myOnLoad()" onunload="myOnUnload()">
<a href="somepage.html">Click Me</a>

<a href="somepage.html" onclick="alert('You Clikced?')">Click Me</a>

<a href="somepage.html" onclick="return linkClick()">Click Me</a>
<script>
    function linkClick() {
        alert('You Clicked?');
        return true;
    }
</script>

<a href="somepage.html" onclick="return linkClick()">Click Me</a>
<script>
    function linkClick() {
        alert('This is link is going nowhere');
        return false;
    }
</script>

<p ondblclick="handle(event)">Paragraph</p>
<script>
    function handle(e) {
        alert(e.type);
    }
</script>

<p ondblclick="handle(event)">Paragraph</p>
<h1 ondblclick="handle(event)">Heading 1</h1>
<span onmouseover="handle(event)">Special Text</span>
<script>
    function handle(e) {
        alert(e.type);
    }
</script>

<p ondblclick="handle(event)">Paragraph</p>
<h1 ondblclick="handle(event)">Heading 1</h1>
<span onmouseover="handle(event)">Special Text</span>
<script>
    function handle(e) {
        if (e.type == 'mouseover') {
            alert('You moved over the Special Text');
        }
    }
</script>

<a id="some-link-1" href="somepage.html">Click Me</a>
<script>
    function linkClick() {
        alert('This link is going nowhere');
        return true;
    }

    document.getElementById('some-link-1').onclick = linkClick;
</script>

<img id="img-1" src="" alt="img 1">
<img id="img-2" src="" alt="img 2">
<script>
    document.getElementById('img-1').onclick = null;

    var img2 = document.getElementById('img-1');
    img2.onclick = functionOne;
    img2.onclick = functionTwo;

    function functionOne() {

    }
    function functionTwo() {

    }
</script>

<a id="some-link-2" href="somepage.html" onclick="return linkClick()">Click Me</a>
<script>
    var link = document.getElementById('some-link-2');
    link.addEventListener('click', function (e) {
        alert('This is link is going nowhere');
        e.preventDefault();
    })
</script>
<script>
    var elementObj = {};
    elementObj.removeEventListener('click', elementObjClick);
    function elementObjClick() {

    }

    elementObj.addEventListener('click', handleOne);
    elementObj.addEventListener('click', handleTwo);
    elementObj.addEventListener('click', handleThree);
    function handleOne() {

    }
    function handleTwo() {

    }
    function handleThree() {

    }
</script>

<p ondblclick="handle()">Paragraph</p>
<script>
    alert(event.type);
</script>

<p id="p">Paragraph</p>
<h1 id="h1">Heading</h1>
<span id="span">Special Text</span>
<script>
    function handle() {
        if (event.type == 'mouseover') {
            alert('You moved over the Special Text');
        }
    }
    document.getElementById('p').ondblclick = handle;
    document.getElementById('h1').onclick = handle;
    document.getElementById('span').onmouseover = handle;
</script>

<a id="some-link-3" href="somepage.html">Click Me</a>
<script>
    var link = document.getElementById('some-link-3');
    function linkClick(e) {
        alert('This is is going nowhere');
        e.returnValue = false;
    }
    link.attachEvent('onclick', linkClick);
</script>

<script>
    if (typeof addEventListener != 'undefined') {
        // use addEventListener()
    } else {
        // use attachEvent()
    }

    if (addEventListener) {
        // use addEventListener()
    } else {
        // use attachEvent()
    }

    function addListener(obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn);
        } else {
            obj.attachEvent('on' + type, fn);
        }
    }
</script>

<div draggable="true">Draggable Content</div>

<div class="drop-zone" id="drop-zone-1">Drop Zone!</div>
<div id="drop-status-1"></div>
<script>
    function handleDragEnter() {
        dropStatus.innerHTML = 'You\'re dragging something!';
    }

    var dropZone = document.getElementById('drop-zone-1');
    var dropStatus = document.getElementById('drop-status-1');

    dropZone.addEventListener('dragenter', handleDragEnter);
</script>

<div class="box red" draggable="true"></div>
<div class="drop-zone" id="drop-zone">Drop Zone!</div>
<div id="drop-status"></div>
<script>
    function dragStartHandler(e) {
        e.dataTransfer.setData('text', 'Drag and Drop!');
    }

    function dragDropHandler(e) {
        e.preventDefault();
        if (e.type == 'dragover') {
            dropStatus.innerHTML = 'You\'re dragging over the drop zone!'
        } else {
            dropStatus.innerHTML = e.dataTransfer.getData('text');
        }
    }

    var dragBox = document.querySelector('[draggable]');
    var dropZone = document.getElementById('drop-zone');
    var dropStatus = document.getElementById('drop-status');

    dragBox.addEventListener('dragstart', dragStartHandler);
    dropZone.addEventListener('dragover', dragDropHandler);
    dropZone.addEventListener('drop', dragDropHandler);
</script>
</body>
</html>